<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="./js/jquery-1.11.3.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="./js/bootstrap.min.js"></script> 
	<script>
		//密码和确认密码一致性校验
		//前提：都不为空
		function checkPwdAndRepwd(f1,f2) {
			if(f1&&f2) {
				//1.拿到密码和确认密码的值
				var pwd = document.getElementById("password").value;
				var repwd = document.getElementById("repassword").value;
				if (pwd == repwd) {
					return true;
				}else {
					return false;
				}
			}
			else{
				return false;
			}
			//
		}
		function checkNotNull(nid){
			//非空校验
			//1.获取用户名输入项元素
			var nodex = document.getElementById(nid);
			//获取对应的错误信息回显label元素
			var msg = document.getElementById(nid + "Msg");
			//获取对应的DIV
			var div = document.getElementById(nid + "Div");
			//2.进行非空判断
			var reg = /^\s*$/;//如果有0-多个空白符号，就为true
			if(reg.test(nodex.value)){
				//不合格
				div.className+=" has-error";
				msg.innerHTML = "不能为空";
				return false;
			}
			else {
				//信息合格
				div.className = "form-group"
				msg.innerHTML = ""
				return true;
			}
			
		}
		//表单校验方法
		function checkForm(){
			
			var flag1 = checkNotNull("username");
			var flag2 = checkNotNull("password");
			var flag3 = checkNotNull("repassword");
			var flag4 = checkPwdAndRepwd(flag2,flag3);
			return flag1&&flag2&&flag3&&flag4;

			
		}
	</script>
  </head>
  <body>
	  <div class = "container">
		  <!-- -->
		  <!--网站头部 -->
		  <div class = "row">
			  <div class = "col-md-3">
				  <img src = "img/uugai.com_1616307625134.png"/>
			  </div>
			  <div class = "col-md-4">
				  <img src = "img/header.png" style = "margin-top: 10px;"/>
			  </div>
			  <div class = "col-md-5">
				  <ul class = "list-inline" style = "margin-top: 25px;">
					  <li><a href="" class = "btn btn-primary">登录</a></li>
					  <li><a href="" class = "btn btn-primary">注册</a></li>
					  <li><a href="" class = "btn btn-danger">购物车</a></li>
					  
					  
				  </ul>
			  </div>
			  
		  </div>
		  <!--导航条 -->
		  <nav class="navbar navbar-default">
		    <div class="container-fluid">
		      <!-- Brand and toggle get grouped for better mobile display -->
		      <div class="navbar-header">
		        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		          <span class="sr-only">Toggle navigation</span>
		          <span class="icon-bar"></span>
		          <span class="icon-bar"></span>
		          <span class="icon-bar"></span>
		        </button>
		        <a class="navbar-brand" href="#">首页</a>
		      </div>
		      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		        <ul class="nav navbar-nav">
		          <li class="active"><a href="#">网课答案<span class="sr-only">(current)</span></a></li>
		          <li><a href="#">课后答案</a></li>
		          <li class="dropdown">
		            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
		            <ul class="dropdown-menu">
		              <li><a href="#">书籍观感</a></li>
		              <li><a href="#">人生建议</a></li>
					  <li><a href="#">技术文章</a></li>
					  <li><a href="#">电子书</a></li>
		              <li role="separator" class="divider"></li>
		            </ul>
		          </li>
		        </ul>
		        <form class="navbar-form navbar-right" role="search">
		          <div class="form-group">
		            <input type="text" class="form-control" placeholder="Search">
		          </div>
		          <button type="submit" class="btn btn-default">Submit</button>
		        </form>
		      </div><!-- /.navbar-collapse -->
		    </div><!-- /.container-fluid -->
		  </nav>
		  <!--注册页面主体 -->
		  <div class = "row" style = "background-image: url(img/regist_bg.jpg);">
			  <div class = "col-sm-8 col-sm-offset-2" style = "border:5px solid gainsboro;background-color: white;">
				  <!--表单部分 -->
				  <div class = "row">
					  <div class = "col-sm-8 col-sm-offset-2">
						  <font color = "#23527C" size = "4">会员注册</font>
					  </div>
				  </div>
				  <form class="form-horizontal" onsubmit= "return checkForm()">
				    <div id = "usernameDiv" class="form-group">
				      <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
				      <div class="col-sm-8">
				        <input type="text" class="form-control" id="username" name = "username" placeholder="请输入用户名">
				      </div>
					  <label  id = "usernameMsg" class = "col-sm-2 control-label"></label>
				    </div>
					
					<div id = "passwordDiv" class="form-group">
					  <label for="inputEmail3" class="col-sm-2 control-label">密码</label>
					  <div class="col-sm-8">
					    <input type="password" class="form-control" id="password" name = "password" placeholder="请输入密码">
					  
					  </div>
					  <label  id = "passwordMsg" class = "col-sm-2 control-label"></label>
					</div>
					
					<div id = "repasswordDiv" class="form-group">
					  <label for="inputEmail3" class="col-sm-2 control-label">确认密码</label>
					  <div class="col-sm-8">
					    <input type="password" class="form-control" id="repassword"  placeholder="请输入确认密码">
					  
					  </div>
					  <label  id = "repasswordMsg" class = "col-sm-2 control-label"></label>
					</div>
					
					<div class="form-group">
					  <label for="inputEmail3" class="col-sm-2 control-label">email</label>
					  <div class="col-sm-8">
					    <input type="email" class="form-control" id="email" name = "email" placeholder="请输入邮箱">
					  </div>
					</div>
				    
				    <div class="form-group">
				      <div class="col-sm-offset-2 col-sm-10">
				        <input type="submit" class="btn btn-danger" value = "注册"/>
				      </div>
				    </div>
				  </form>
			  </div>
							
		  </div>
		  <!--网站底部 -->
		  <div class = "row">
			  <div class = "col-xs-12">
				  <img src="img/footer.jpg" width = "100%"/>				  
			  </div>
		  </div>
		  <div class = "row">
			  <div class = "col-xs-12 text-center">
				  <ul class = "list-inline">
					  <li><a href = "">关于我们</a></li>
					  <li><a href = "">联系我们</a></li>
					  <li><a href = "">招贤纳士</a></li>
					  <li><a href = "">法律声明</a></li>
					  <li><a href = "">友情链接</a></li>
					  <li><a href = "">支付方式</a></li>
					  <li><a href = "">服务声明</a></li>
				  </ul>
				  
			  </div>
		  </div>
	  </div>
  </body>
</html>